import { defineStore } from 'pinia'
import RouterView from '@/layout/router-view.vue'
import { defineAsyncComponent } from 'vue'
import router from '@/router'
// @ts-ignore
const modules = import.meta.glob('@/views/**/*.vue')

export const useMenuStore = defineStore('menu', {
  state: () => ({
    menus: [],
    mockApi: [
      {
        path: 'menu1',
        component: 'menu/menu1',
        title: '菜单1',
      },
      {
        path: 'menu2',
        title: '菜单2',
        children: [
          {
            path: 'menu2-1',
            component: 'menu/menu2-1',
            title: '菜单2-1',
          },
          {
            path: 'menu2-2',
            component: 'menu/menu2-2',
            title: '菜单2-2',
          },
          {
            path: 'menu2-3',
            title: '菜单2-3',
            children: [
              {
                path: 'menu2-3-1',
                title: '菜单2-3-1',
                children: [
                  {
                    path: 'menu2-3-1-1',
                    component: 'menu/menu2-3-1-1',
                    title: '菜单2-3-1-1',
                  },
                  {
                    path: 'menu2-3-1-2',
                    component: 'menu/menu2-3-1-2',
                    title: '菜单2-3-1-2',
                  },
                ],
              },
              {
                path: 'menu2-3-2',
                component: 'menu/menu2-3-2',
                title: '菜单2-3-2',
              },
            ],
          },
        ],
      },
      {
        path: 'menu3',
        component: 'menu/menu3',
        title: '菜单3',
      },
      {
        path: 'menu4',
        component: 'menu/menu4',
        title: '菜单4',
      },
    ],
  }),
  getters: {},
  actions: {
    initRoutes(data) {
      const menuRouters = this.setMenu(data, [])
      menuRouters.forEach((v) => {
        router.addRoute('root', v)
      })
      router.getRoutes().filter((v) => v.name === 'root')[0].redirect =
        menuRouters[0].redirect || menuRouters[0].path
      this.menus = menuRouters
      document.getElementById('loader').style.display = 'none'
      console.log(this.menus)
    },
    setMenu(arr: any, parent: any = []) {
      return arr.map((v, i) => {
        const _pA = [...parent, v]
        const rou: any = {
          path:
            parent?.length > 0
              ? `${parent[parent.length - 1].path}/${v.path.replace(/\//g, '')}`
              : `/${v.path.replace(/\//g, '')}`,
          meta: {
            res: v,
            title: v.title,
          },
        }
        if (v.redirect) {
          rou.redirect = v.redirect
        }
        if (v.children?.length > 0) {
          rou.component = RouterView
          rou.children = this.setMenu(v.children, [...parent, rou])
        } else {
          rou.component = () => modules[`/src/views/${v.component}.vue`]()
          parent.forEach((p) => {
            if (!p.redirect) {
              p.redirect = rou.path
            }
          })
        }
        return rou
      })
    },
  },
})
